<template>
  <section>
  	<div class="model retrieval">
      <img :src="IMGBASE64.JIANSUOGUANLI2X" class="orange">
      <span class="title">检索管理</span>
      <div class="body">
        <span>学期:</span>
        <select class="semester-select" v-model="semesterSelect" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
          <option v-for="item in semesterOption" :label="item.termName" :value="item.termName"></option>
        </select>
				<span>考试名称:</span>
        <select class="select" v-model="examineSelect" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
          <option v-for="item in examineOption" :label="item.examName" :value="item.gradeId"></option>
        </select>
        <span>年级:</span>
        <select class="select" v-model="gradeSelect" @change="getClassData()" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
          <option v-for="(item, key) in gradeOption" :label="item" :value="key"></option>
        </select>
        <span>班级:</span>
        <select class="endselect" v-model="classSelect" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
          <option v-for="(item, key) in classOption" :label="item" :value="item"></option>
        </select>
        <el-button type="primary" @click="getTableData" size="small">搜索</el-button>
        <el-button type="primary" @click="clearGradeSelect" size="small">重置</el-button>
      </div>
  	</div>

  	<div class="model score">
      <img :src="IMGBASE64.XUESHENGGEKECHENGJI2X" class="pink">
  		<span class="title">学生各科成绩</span>
  		<div class="kong"></div>
  		<el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="#" align="center"></el-table-column>
        <el-table-column prop="studentName" label="姓名" align="center" :show-overflow-tooltip='true'></el-table-column>
        <el-table-column prop="classGrade" label="班级" align="center"></el-table-column>
        <el-table-column prop="studentId" label="学号" align="center"></el-table-column>
        <el-table-column prop="chineseScore" label="语文" align="center"></el-table-column>
        <el-table-column prop="chineseRanking" label="语文名次" align="center" width="100"></el-table-column>
        <el-table-column prop="mathScore" label="数学" align="center"></el-table-column>
        <el-table-column prop="mathRanking" label="数学名次" align="center" width="100"></el-table-column>
        <el-table-column prop="englishScore" label="英语" align="center"></el-table-column>
        <el-table-column prop="englishRanking" label="英语名次" align="center" width="100"></el-table-column>
        <el-table-column prop="sumScore" label="总分" align="center"></el-table-column>
        <el-table-column prop="classRanking" label="班排" align="center"></el-table-column>
        <el-table-column prop="classGrade" label="级排" align="center"></el-table-column>
        <el-table-column prop="lastjipai" label="上次级排" align="center" width="100"></el-table-column>
        <el-table-column prop="jipaiSF" label="级排升幅" align="center" width="100"></el-table-column>
      </el-table>
      <el-pagination
          v-show="paging"
          @current-change="handleCurrentChange"
          :page-size="20"
          layout="prev, pager, next, jumper"
          :total="total"
          class="pull-right">
        </el-pagination>
  	</div>
  </section>
</template>

<script>
export default {
  data () {
    return {
      semesterSelect: null,
      semesterOption: [],
      examineSelect: null,
      examineOption: [],
      gradeSelect: null,
      gradeOption: {},
      classSelect: null,
      classOption: [],
      total: 0,
      page: 1,
      paging: true,
      tableData: []
    }
  },
  mounted () {
    this.getSemesterData()
    this.getExamineData()
    this.getGradeData()
    this.getTableData()
  },
  methods: {
    getExamineData () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'exam/query', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.examineOption = response.data.data
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    handleCurrentChange (val) {
      this.page = val
      this.getTableData()
    },
    getTableData () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'exam/score/studentScores', {page: (this.page), size: 20, gradeId: this.gradeSelect, examId: this.examineSelect, clazz: this.classSelect}, {'headers': {'yxt-xtoken': localStorage}}).then(function (response) {
        if (response.body.code === '000') {
          this.tableData = response.data.data.content
          this.total = response.data.data.total
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getSemesterData () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'term/all', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.semesterOption = response.data.data.content
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getGradeData () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'public/grade/query ', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.gradeOption = response.data.data.gradeMap
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getClassData () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'public/class/query?grade=' + this.gradeSelect, {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.classOption = response.data.data
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    clearGradeSelect () {
      this.examineSelect = null
      this.gradeSelect = null
      this.classSelect = null
      this.semesterSelect = null
    }
  }
}
</script>

<style lang="less" scoped>
@import '/static/css/all-use.css';
.retrieval{
	.body{
		span{
    	margin-left: 4%;
    }
    span:first-child{
    	margin-left: 0;
    }
    .semester-select{
      width: 16%;
      border: 0;
      border-bottom: 1px solid #D7D7D7;
    }
    .select{
      width: 10%;
      border: 0;
      border-bottom: 1px solid #D7D7D7;
    }
    .endselect{
      width: 10%;
      border: 0;
      border-bottom: 1px solid #D7D7D7;
      margin-right: 3%;
    }
	}
}
</style>
